<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>尚合网页</title>
		<style>
		/*大框架搭建*/
			/*导航栏，公告，最下方的宽度*/
			.nav,.bulletin,.bottom {
				width: 100%;
			}
			/*1、最上方高度*/
			.top {
				width: 980px;
				height: 70px;
				margin: 0 auto;
				position: relative;
			}
			/*2、导航栏高度及背景图*/
			.nav {
				height: 55px;
				background-image: url(img/nav_bg.png);
				border-top: 1px solid gainsboro;
				border-bottom: 1px solid gainsboro;
				margin: 0px 0px;
				
				position: relative;
			}
			/*背景图片size*/
			.background {
				width: 980px;
				height: 620px;
				margin: 0 auto;
			}
			/*3、中间公告栏高度*/
			.middle {
				height: 50px;
				border-top: 1px solid gainsboro;
				border-bottom: 1px solid gainsboro;
				background-color: ghostwhite;
			}
			/*4、主体size*/
			.content {
				width: 980px;
				height: 300px;
				margin: 0 auto;
				position: relative;
			}
			/*最下方高度及背景颜色*/
			.bottom {
				height: 300px;
				background-color: black;
				margin-bottom: 0px;
				
				position: relative;
			}
		
			/*41、主内容左版*/
			.left_content {
				width: 300px;
				height: 250px;
				border: 1px solid gainsboro;
				
				position: absolute;
				top: 24px;
				left: 0;
				
			}
			/*42、主内容中版*/
			.mid_content {
				width: 340px;
				height: 250px;
				border: 1px solid gainsboro;

				position: absolute;
				top: 24px;
				left: 320px;
			}
			/*43、主内容右版*/
			.right_content {
				width: 300px;
				height: 250px;
				border: 1px solid gainsboro;

				position: absolute;
				top: 24px;
				right: 0;
			}
			
		/*各部分填充*/
			/*1、导航栏上方尚合图标及搜索栏部分*/
			.iconPosition {
				position: absolute;
				top: 15px;
				left: 0;
			}
			.btnPosition {
				position: absolute;
				top: 15px;
				right: 0;
			}
			.inputPosition {
				height: 26px;
				position: absolute;
				top: 15px;
				right: 26px;
			}
			
			/*2、导航栏填充*/
			ul li {
				/*去除无序列表标签格式*/
				list-style: none;
			}
			.nav ul li a {
				/*使用左浮动让文字横向排列*/
				float: left;
				/*设置字体间的间距*/
				padding: 0 50px;
				/*去除下划线*/
				text-decoration: none;
				/*设置字体颜色*/
				color: black;
			}
			.nav a:hover {
				color: greenyellow;
			}
			
			.nav ul li img {
				position: absolute;
				top: 0;
			}
			/*3、填充公告栏*/
			.bulletin {
				width: 980px;
				height: 50px;
				margin: 0 auto;
				
				position: relative;
			}
			.bulletinPosition {
				position: absolute;
				top: 17px;
				left: 0;
			}
			.littleIconPosition {
				position: absolute;
				top: 15px;
				right: 0;
			}
			.font_size {
				font-size: 12px;
			}
			
			/*4、内容填充*/
			.font {
				color: greenyellow;
				
				position: absolute;
				top: 25px;
				left: 22px;
			}
			.littleArrowsPosition {
				position: absolute;
				top: 30px;
				left: 5px;
			}
			/*41、内容左版填充*/
			.imagePosition {
				position: absolute;
				top: 72px;
				left: 50px;
			}
			.left {
				position: absolute;
				top: 140px;
				left: 30px;
			}
			.right {
				position: absolute;
				top: 140px;
				right: 30px;
			}
			
			/*42、内容中版填充*/
			.font_color {
				color: red;
			}
			.text {
				position: absolute;
				top: 40px;
				left: 22px;
			}
			
			.color {
				color: greenyellow;
				font-weight: 300;
			}
			
			.underline {
				width: 300px;
				border-bottom: 1px dashed gainsboro;
				display: inline-block;
			}
			.text1 {
				position: absolute;
				top: 70px;
				left: 22px;
			}
			.text2 {
				position: absolute;
				top: 100px;
				left: 22px;
			}
			.text3 {
				position: absolute;
				top: 130px;
				left: 22px;
			}
			.text4 {
				position: absolute;
				top: 160px;
				left: 22px;
			}
			.text5 {
				position: absolute;
				top: 190px;
				left: 22px;
			}
			.border_left {
				border-left: 3px solid lawngreen;
				padding-left: 5px;
			}
			
			
			/*内容右版填充*/
			.box5 {
				position: absolute;
				top: 180px;
				left: 30px;
			}
			.box6 {
				position: absolute;
				top: 195px;
				left: 30px;
			}
			

			
			
		/*5、bottom部分填充*/
		
		.size {
			position: absolute;
			top: 30px;
			left: 50px;
		}
		tr td {
			padding-left: 50px;
			padding-bottom: 20px;
			color: ghostwhite;
		}
		tr td a {
			/*去除下划线*/
			text-decoration: none;
			color: gray;
		}
		
		.foot {
			width: 100%;
			border-top: 1px dashed gainsboro;
			height: 50px;
			padding-top:30px;
			text-align: center;
			color: gray;
			
			position: absolute;
			bottom: 30px;
		}
		
		</style>
	</head>
	<body>
		<!-- 最上方尚合图标及搜索栏-->
		<div class="top">
			<img src="img/logo.jpg" class="iconPosition"/>
			<input type="text" value="请输入…" class="inputPosition"/>
			<img src="img/search2.jpg" class="btnPosition"/>
		</div>
		<!-- 导航栏-->
		<div class="nav">
			<ul>
				<li><a href="#">首页</a><img src="img/nav_bg-line.png" /></li>
				<li><a href="#">智能手机</a><img src="img/nav_bg-line.png" /></li>
				<li><a href="#">平板电脑</a><img src="img/nav_bg-line.png" /></li>
				<li><a href="#">配件</a><img src="img/nav_bg-line.png" /></li>
				<li><a href="#">服务支持</a><img src="img/nav_bg-line.png" /></li>
				<li><a href="#">关于尚合</a></li>
			</ul>
		</div>
		<!-- 背景图片（主图片）-->
		<div class="background">
			<img src="img/banner.jpg" />
		</div>
		<!-- 最新公告-->
		<div class="middle">
			<div class="bulletin">
				<span class="bulletinPosition font_size">最新公告：尚合Aone智能手机入网证已获取工信部门审批下发。尚合官网</span>	
				<!--设置公告栏中的图标-->
				<div class="littleIconPosition">
					<img src="img/zone.png" />
					<img src="img/weibo.png" />
					<img src="img/xinlang.png" />
					<img src="img/renren.png" />
				</div>
			</div>
		</div>
		<!-- 主要内容-->
		<div class="content">
			<!--内容左版-->
			<div class="left_content">
				<img src="img/o.jpg" class="littleArrowsPosition"/>
				<span class="font">新品发布</span>
				<img src="img/home_hot_01.png" class="imagePosition" />
				
				<!--向左向右箭头-->
				<div class="left">
					<img src="img/left.png" />
				</div>
				<div class="right">
					<img src="img/right.png" />
				</div>
			</div>
			
			<!--内容中版-->
			<div class="mid_content">
				<img src="img/o.jpg" class="littleArrowsPosition" />
				<span class="font">新闻中心</span>
				<p class="text font_size font_color underline">致歉公告</p>
				<p class="text1 font_size underline">首批尚合Aonet已全部售罄</p>
				<p class="text2 font_size underline">【媒体报导】国产高性价比 尚合Aonet四核手机评测</p>
				<p class="text3 font_size underline">我司产品已经通过了国家强制性产品3C认证</p>
				<p class="text4 font_size underline">尚合Aone智能手机入网证已经获得工信部门审批下发</p>
				<p class="text5 font_size underline">我司通过ISO9001：2008国家质量管理体系认证</p>
			</div>
			<!--内容右版-->
			<div class="right_content">
				<img src="img/o.jpg" class="littleArrowsPosition" />
				<span class="font">技术与支持</span>
				<!--
				<span class="color box1">|</span>-->
				<p class="text font_size border_left">售后服务</p>
				<p class="text1 font_size border_left">投诉与建议</p>
				<p class="text2 font_size border_left">联保网点</p>
				<p class="text3 font_size border_left">常见问题FAQ</p>
				<p class="box5 font_size">深圳市汇聚众和科技发展有限公司</p>
				<p class="box6 font_size">服务热线：400-633-7922</p>
			</div>					
		</div>
		<!-- 最下方链接-->
		<div class="bottom">
				<table class="font_size size">
					<tr class="fcolor padding">
						<td>尚合首页</td>
						<td>尚合首页</td>
						<td>尚合首页</td>
						<td>尚合首页</td>
					</tr>
					<tr class="fcolor1">
						<td><a href="#">返回首页</a></td>
						<td><a href="#">返回首页</a></td>
						<td><a href="#">返回首页</a></td>
						<td><a href="#">返回首页</a></td>
					</tr>
				</table>
				
				<div class="foot font_size">
					<p>深圳市垃圾卡的哦覅偶时间佛的回购及<br/>打个卡就考虑对方开发顾客卡多少积分卡了</p>
				</div>
		</div>
	</body>
</html>
